<template>
	<div id="app" style="background:#F5F5F5;zoom: 75%;">
	<el-row style="background:#F5F5F5;">
	  <el-card class="box-card" shadow="never">
	    <div class="clearfix">
	      <span class="bt">产品营销-营销宣传&nbsp; &nbsp;(未派单)</span>
	      <el-button style="float: right;font-size: 16px;" type="primary">派单</el-button>
	    </div>
	    <div class="text item">
			<el-form ref="form" label-width="80px">
	          <el-col :span="7" :xs="24"  style="text-align: left;width: 30.8%;">
					<p style="font-size:24px;margin-left: 2%;"><span style="font-size:18px;">&nbsp;&nbsp;&nbsp;情绪值：</span><span>78</span><span style="font-size:14px;">分&nbsp; </span>
					<span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp;</span>
					<span style="font-size:18px;margin-left: 23%;">环比：<span class="sp"><i class="el-icon-caret-top"></i>0.8%</span></span></p>
					<p style="font-size:24px;margin-left: 2%;padding-top: 2%;"><span style="font-size:18px;">&nbsp;&nbsp;&nbsp;客户数：</span><span>17291</span><span style="font-size:14px;">人</span>
					<span style="font-size:18px;margin-left: 23%;">环比：<span class="sp"><span class="red"><i class="el-icon-caret-bottom"></i>10%</span></span></span></p>
					<p style="font-size:24px;margin-left: 2%;padding-top: 2%;"><span style="font-size:18px;">年度关怀：</span><span>3</span><span style="font-size:14px;">次</span><span> </span><span style="font-size:18px;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</span>
					<span style="font-size:18px;margin-left: 26%;">有效：1次</span></p>
	          </el-col>
			  <el-col :xs="24"  style="text-align: center; background: #DCDFE6;width: 1px;height: 170px;"></el-col>
			  <el-col :span="8" :xs="24"  style="text-align: center;">
			  	<p><span style="font-size:18px;">&nbsp;平均营销次数：<span style="color:#ff9900 ;">8&nbsp;次</span>&nbsp; &nbsp; &nbsp; &nbsp; 环比：<span class="sp"><i class="el-icon-caret-top"></i>9%</span></span></p>
				<div ref="echartsCont1" class="content"></div>
			  </el-col>
			  <el-col :xs="24"  style="text-align: center; background: #DCDFE6;width: 1px;height: 170px;"></el-col>
			  <el-col :span="8" :xs="24" style="text-align: right;">
			    <p style="text-align: center;"><span style="font-size:18px;">不满关键因素：<span class="bm">10&nbsp;个</span>&nbsp; &nbsp; &nbsp; &nbsp;环比：<span class="sp"><i class="el-icon-caret-bottom"></i>10%</span></span></p>	
				<div ref="echartsBar1" class="content"></div>
			  </el-col>
			</el-form>
	    </div>
	  </el-card>

	  <el-card class="box-card" shadow="never">
	      <div class="clearfix">
	        <span class="bt">产品营销-营销宣传&nbsp; &nbsp;(未派单)</span>
	        <el-button style="float: right;font-size: 16px;" type="primary">派单</el-button>
	      </div>
	      <div class="text item">
	  		<el-form ref="form" label-width="80px">
              <el-col :span="7" :xs="24"  style="text-align: left;width: 30.8%;">
					<p style="font-size:24px;margin-left: 2%;"><span style="font-size:18px;">&nbsp;&nbsp;&nbsp;情绪值：</span><span>78</span><span style="font-size:14px;">分&nbsp; </span>
					<span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp;</span>
					<span style="font-size:18px;margin-left: 23%;">环比：<span class="sp"><i class="el-icon-caret-top"></i>0.8%</span></span></p>
					<p style="font-size:24px;margin-left: 2%;padding-top: 2%;"><span style="font-size:18px;">&nbsp;&nbsp;&nbsp;客户数：</span><span>17291</span><span style="font-size:14px;">人</span>
					<span style="font-size:18px;margin-left: 23%;">环比：<span class="sp"><span class="red"><i class="el-icon-caret-bottom"></i>10%</span></span></span></p>
					<p style="font-size:24px;margin-left: 2%;padding-top: 2%;"><span style="font-size:18px;">年度关怀：</span><span>3</span><span style="font-size:14px;">次</span><span> </span><span style="font-size:18px;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</span>
					<span style="font-size:18px;margin-left: 26%;">有效：1次</span></p>
	          </el-col>
	  		  <el-col :xs="24"  style="text-align: center; background: #DCDFE6;width: 1px;height: 170px;"></el-col>
	  		  <el-col :span="8" :xs="24"  style="text-align: center;">
	  		  	<p><span style="font-size:18px;">&nbsp;平均营销次数：<span style="color:#ff9900">8&nbsp;次</span>&nbsp; &nbsp; &nbsp; &nbsp; 环比：<span class="sp"><i class="el-icon-caret-top"></i>9%</span></span></p>
	  			<div ref="echartsCont2" class="content"></div>
	  		  </el-col>
	  		  <el-col :xs="24"  style="text-align: center; background: #DCDFE6;width: 1px;height: 170px;"></el-col>
	  		  <el-col :span="8" :xs="24" style="text-align: right;">
	  		    <p style="text-align: center;"><span style="font-size:18px;">不满关键因素：<span class="bm">10&nbsp;个</span>&nbsp; &nbsp; &nbsp; &nbsp;环比：<span class="sp"><i class="el-icon-caret-bottom"></i>10%</span></span></p>	
	  			<div ref="echartsBar2" class="content"></div>
	  		  </el-col>
	  		</el-form>
	      </div>
	    </el-card>
		
	    <el-container class="container">
		<el-header>
			<el-row style="background:white;">
				<span class="ypd">情绪预警-已派单</span>
			</el-row>
			<el-row style="background:white;">
				<span class="ypd1" style="margin-left: 1.5%;">产品营销-营销宣传（已派单）</span>
			</el-row>
		</el-header>
	    <el-main class="elmain">
			<el-form ref="form" label-width="80px">
			  <el-col :span="7" :xs="24"  style="text-align: left;width: 30.8%;">
				<p style="font-size:24px;margin-left: 2%;"><span style="font-size:18px;">&nbsp;&nbsp;&nbsp;情绪值：</span><span>78</span><span style="font-size:14px;">分&nbsp; </span>
				<span style="font-size:18px;">&nbsp; &nbsp; &nbsp; &nbsp;</span>
				<span style="font-size:18px;margin-left: 23%;">环比：<span class="sp"><i class="el-icon-caret-top"></i>0.8%</span></span></p>
				<p style="font-size:24px;margin-left: 2%;padding-top: 2%;"><span style="font-size:18px;">&nbsp;&nbsp;&nbsp;客户数：</span><span>17291</span><span style="font-size:14px;">人</span>
				<span style="font-size:18px;margin-left: 23%;">环比：<span class="sp"><span class="red"><i class="el-icon-caret-bottom"></i>10%</span></span></span></p>
				<p style="font-size:24px;margin-left: 2%;padding-top: 2%;"><span style="font-size:18px;">年度关怀：</span><span>3</span><span style="font-size:14px;">次</span><span> </span><span style="font-size:18px;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span style="font-size:18px;margin-left: 26%;">有效：1次</span></p>
			  </el-col>
			  <el-col :xs="24"  style="text-align: center; background: #DCDFE6;width: 1px;height: 170px;margin-left: -4px;"></el-col>
			  <el-col :span="8" :xs="24"  style="text-align: center;">
			  	<p><span style="font-size:18px;">&nbsp;平均营销次数：<span style="color:#ff9900">8次</span>&nbsp; &nbsp; &nbsp; &nbsp; 环比：<span class="sp"><i class="el-icon-caret-top"></i>9%</span></span></p>
				<div ref="echartsCont3" class="content"></div>
			  </el-col>
			  <el-col :xs="24"  class="line"></el-col>
			  <el-col :span="8" :xs="24" style="text-align: right;">
			    <p style="text-align: center;"><span style="font-size:18px;">不满关键因素：<span class="bm">10个</span>&nbsp; &nbsp; &nbsp; &nbsp;环比：<span class="sp"><i class="el-icon-caret-bottom"></i>10%</span></span></p>	
				<div ref="echartsBar3" class="content"></div>
			  </el-col>
			</el-form>

		    <el-table :data="tableData" stripe style="width:97%;margin-left: 1.5%;" header-cell-class-name="tb"
			    cell-class-name="cr">
				<el-table-column prop="date" label="关怀时间" width="180">
				</el-table-column>
				<el-table-column prop="name" label="关怀策略名称" width="180">
				</el-table-column>
				<el-table-column prop="ghs" label="关怀客户数">
				</el-table-column>
				<el-table-column prop="pdr" label="派单人">
				</el-table-column>
				<el-table-column prop="pdbm" label="派单部门">
				</el-table-column>
				<el-table-column prop="jd" label="当前进度">
				</el-table-column>
				<el-table-column prop="ghq" label="关怀前情绪值">
				</el-table-column>
				<el-table-column prop="ghh" label="关怀后情绪值">
				</el-table-column>
				<el-table-column prop="xg" label="效果">
				</el-table-column>
		    </el-table>
		</el-main>
	  </el-container>
	</el-row>
	</div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
export default {
	name: "lineChart",
	mounted() {
		this.$nextTick(()=>{
			this.initChart();//加载图表
		})
	},
	methods: {
        initChart () {
        var myechartsCont1 = echarts.init(this.$refs.echartsCont1);
		var myechartsCont2 = echarts.init(this.$refs.echartsCont2);
		var myechartsCont3 = echarts.init(this.$refs.echartsCont3);
		this.setLine(myechartsCont1);
		this.setLine(myechartsCont2);
		this.setLine(myechartsCont3);
		
		var echartsBar1 = echarts.init(this.$refs.echartsBar1);
		var echartsBar2 = echarts.init(this.$refs.echartsBar2);
		var echartsBar3 = echarts.init(this.$refs.echartsBar3);
		this.setBar(echartsBar1);
		this.setBar(echartsBar2);
		this.setBar(echartsBar3);
      },
	  setLine(ets){
		 ets.setOption({
		   color: ['#ff8c00'],
		   tooltip : {
		     trigger: 'axis',
		     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		       type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		     }
		   },
		   grid: {
			 y:16,
			 y2:28,
		     left: '2%',
		     right: '4%',
		     containLabel: true
		   },
		   xAxis : [
		     {
		       type : 'category',
		       data : ['3月', '4月', '5月', '6月', '7月', '8月', '9月'],
		       axisTick: {
		         alignWithLabel: true
		       }
		     }
		   ],
		   yAxis : [
		     {
		       type : 'value',
			   splitLine :{
			     lineStyle:{
			         type:'dashed'//虚线
			     },
			     show: true //隐藏
			   }
		     }
		   ],
		   series : [
		     {
		       name:'总共',
		       type: 'line',
		       smooth: true,
		       barWidth: '60%',
		       data:[13,9,11,3,6,20,12],
			   lineStyle: {
			     color: '#ff9900'
			   },
			   itemStyle: {
			     normal: {	 
			       areaStyle: { type: 'default' },
			       color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			         { offset: 0, color: '#ff9900' },
			         { offset: 0.3, color: 'rgba(249, 183, 84, 0.3)' },
			         { offset: 1, color: 'rgba(255, 235, 204, 0.1)' }
			       ]),
			       borderColor: '#ff9900',
			       borderWidth: 2
			     }
			   }
		     }
		   ]
		 }); 
	  },
	  setBar(ets){
			 ets.setOption({
			   tooltip : {
			     trigger: 'axis',
			     axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			       type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			     }
			   },
			   grid: {
				 y:16,
				 y2:28,
			     left: '3%',
			     right: '4%',
			     containLabel: true
			   },
			   dataset: {
			       source: [
			         ['product', '2015', '2016', '2017','2018','2019'],
			         ['办理不成功', 43.3, 85.8],
			         ['产品使用问题', 83.1, 73.4],
			         ['取消不成功', 86.4, 65.2],
			         ['副号短彩信发送不成功', 72.4, 53.9],
					 ['副号接/打电话不成功', 72.4, 53.9]
			       ]
			     },
			    xAxis: { type: 'category' },
			    yAxis: {splitLine :{
			     show: false //隐藏
			   }},
			    series: [{ type: 'bar',	color: ['#ffbc11'],label:{show: true,position:'top'},
				itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color:'#ffbc11' },
				  { offset: 0.3, color: 'rgba(249, 183, 84, 0.3)'},
				  { offset: 1, color: '#ff9900' }
				])
			  }},
				{ type: 'bar',color: ['#947eff'],label:{show: true,position:'top'},	itemStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				  { offset: 0, color: '#b17cff' },
				  { offset: 0.3, color: '#d4b4ff' },
				  { offset: 1, color: '#A366FF' }
				])
			  }}]
			 }); 
	    }  
	},
    data() {
      return {
        tableData: [{
		  date: '2022年4月21日 ',
		  name: '过度营销打扰关停',
		  ghs: '178934人',
		  pdr: '李丹',
		  pdbm: '市场部',
		  jd: '已完成',
		  ghq: '72分',
		  ghh: '75分',
		  xg: '有效'
        }, {
          date: '2022年4月21日 ',
          name: '过度营销打扰关停',
          ghs: '178934人',
		  pdr: '李丹',
		  pdbm: '市场部',
		  jd: '已完成',
		  ghq: '73分',
		  ghh: '77分',
		  xg: '有效'
        }, {
          date: '2022年4月21日 ',
          name: '过度营销打扰关停',
          ghs: '178934人',
		  pdr: '李丹',
		  pdbm: '市场部',
		  jd: '已完成',
		  ghq: '79分',
		  ghh: '70分',
		  xg: '无效'
        }]
      }
    }
  }
</script>

<style>
  .qxz{
	font-size:24px;margin-left: 5%;margin-right: 25%;	
   }
   .khs{
	  text-align: left;margin-top: 2%; 
   }
  .hbz{
	font-size:18px;margin-left: 45%;   
   }
  .text {
    font-size: 14px;
  }
  .item {
	margin-top: 24px;
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    margin-left: 1%;
    margin-top: 1%;
    width: 98%;
  }
  .container{
	  margin-top: 1.5%;
	  background: white;
	  margin-left: 1%;
	  width: 98%;
  }
    .content{
      display: flex;
      flex-direction: row;
      align-content: center;
      align-items: center;
	  margin: auto;
      height: 160px;
      width: 480px;
	  margin-top: 2%;
    }
	.pd{
		float: left;
		margin-left: 1%;
		font-size: 28px;
		color: #262626;
	    padding-top: 1%;
	    padding-bottom: 1%;
	}
	.bt{
		text-align: center;
		float: left;
		font-family: '思源黑体 CN', sans-serif;
		font-weight: 700;
		font-style: normal;
		font-size: 20px;
		color: #262626;
	}
	.sp{
		color: rgba(51, 153, 51, 1);
	}
	.red{
		color: red;
	}
	.bm{
		color: red;
		font-size:18px;
	}
	.ls{
		font-size:18px;
	}
	.cc{
		text-align: center;
	}
	.tb{
		color:#262626;
         background: #F5F5F5;
		font-size:16px
	}
	.cr{
		color:#595959;
		font-size:18px
	}
	.ypd{
		margin-top: 16px;
		height: 24px;
		font-size: 20px;
		font-family: SourceHanSansSC-Medium, SourceHanSansSC;
		font-weight: 700;
		color: #262626;
		line-height: 24px;
		float: left;
	}
	.ypd1{
		margin-top: 28px;
		height: 24px;
		font-size: 18px;
		font-family: SourceHanSansSC-Medium, SourceHanSansSC;
		font-weight: 500;
		color: #262626;
		line-height: 24px;
		float: left;
	}
	.elmain{
		margin-top: 3%;
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		margin-left: 1%;
		width: 98%;
		border: 2px solid #f0f2f5;
		box-shadow: -4px 1px 1px -4px #262626, 2px 3px 5px -4px #262626;
		overflow: visible;
	}
	.line{
        text-align: center; 
		background: #DCDFE6;
		width: 1px;
		height: 170px;
		margin-left: 12px;		
	}
</style>
